<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import useCommonStore from '@/stores/common'
import type { FormRules, FormInstance } from 'element-plus'
import SupplierChannelModel from '../../../model/supplierChannel'

interface IEmits {
  (e: 'update'): void
}

interface IProps {
  selectChannel: number | undefined
}

const commonStore = useCommonStore()
const open = defineModel<boolean>({ default: false })

const props = defineProps<IProps>()

const labelString = computed(() => {
  let str = props.selectChannel ? '编辑' : '新增'
  return {
    dialogTitle: str + '渠道',
    submitStr: str + '成功',
    disabled: !!props.selectChannel
  }
})

const emits = defineEmits<IEmits>()

const loading = ref(false)
const formRef = ref<FormInstance>()
const formData = ref({
  name: '',
  channelCode: '',
  status: 1,
  relatedShops: [],
  secureKey: '',
  secureToken: ''
})

const init = async () => {
  if (props.selectChannel) {
    try {
      loading.value = true
      const data = await SupplierChannelModel.getDetail(props.selectChannel)
      console.log(data)
      formData.value = data
    } catch (error) {
      console.log(error)
    } finally {
      loading.value = false
    }
  }
}
init()

const close = () => {
  open.value = false
}
const submit = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      console.log(formData.value)
      try {
        loading.value = true
        if (props.selectChannel) {
          await SupplierChannelModel.editById(props.selectChannel, formData.value)
        } else {
          await SupplierChannelModel.add(formData.value)
        }
        ElMessage.success(labelString.value.submitStr)
        emits('update')
        close()
      } catch (error) {
        console.log(error)
      } finally {
        loading.value = false
      }
    }
  })
}

const rules = reactive<FormRules<typeof formData>>({
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  channelCode: [{ required: true, message: '必填', trigger: 'blur' }],
  status: [{ required: true, message: '必填', trigger: 'change' }],
  secureKey: [{ required: true, message: '必填', trigger: 'blur' }],
  secureToken: [{ required: true, message: '必填', trigger: 'blur' }]
})

const storesDrop = ref<Array<any>>([])
const getStoreDrop = async () => {
  const data = await SupplierChannelModel.getStoresDrop()
  console.log(data)
  storesDrop.value = data
}
getStoreDrop()
</script>

<template>
  <el-dialog v-model="open" :title="labelString.dialogTitle" width="666">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120" v-loading="loading">
      <el-form-item label="渠道名称" prop="name">
        <el-input v-model="formData.name" clearable class="!w-[300px]"></el-input>
      </el-form-item>
      <el-form-item label="渠道Channel" prop="channelCode">
        <el-input v-model="formData.channelCode" clearable class="!w-[300px]"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio v-for="item in commonStore.activeList" :key="item.value" :value="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="SecureKey" prop="secureKey">
        <el-input
          v-model="formData.secureKey"
          clearable
          class="!w-[300px]"
          :disabled="labelString.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="SecureToken" prop="secureToken">
        <el-input
          v-model="formData.secureToken"
          clearable
          class="!w-[300px]"
          :disabled="labelString.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="关联小店" prop="relatedShops" v-if="props.selectChannel">
        <el-select
          v-model="formData.relatedShops"
          multiple
          filterable
          placeholder="请选择小店"
          clearable
          :disabled="labelString.disabled"
        >
          <el-option
            v-for="item in storesDrop"
            :key="item.id"
            :label="item.nickName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close" :loading="loading">取消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
